<script lang="ts" setup>

import {onMounted, reactive, ref, type UnwrapRef} from 'vue';
import type {Rule} from "ant-design-vue/es/form";
import {message} from "ant-design-vue";
import router from "@/router";
import {useRoute} from "vue-router";
import {deleteBulletinAPI, getBulletinDetailAPI, updateBulletinAPI} from "@/apis/bulletin.ts";

//表单数据
interface FormState {
  bulletinStatus: string;
  bulletinId: string;
  bulletinTitle: string;
  bulletinText: string;
}

const formRef = ref();
const formState: UnwrapRef<FormState> = reactive({
  bulletinId: '',
  bulletinStatus: '',
  bulletinTitle: '',
  bulletinText: '',
});
const rules: Record<string, Rule[]> = {
  bulletinTitle: [
    {required: true, message: '请输入公告标题', trigger: 'change'},
  ],
  bulletinText: [
    {required: true, message: '请输入公告内容', trigger: 'change'},
  ],
};
const onSubmit = () => {
  formRef.value
      .validate()
      .then(async () => {
        const res = await updateBulletinAPI(formState);
        if (res.data.flag) {
          message.success('更新成功');
          router.go(-1)
        } else {
          message.error('更新失败');
        }
      })
      .catch((error: string) => {
        console.log('error', error);
      });

};
const labelCol = {style: {width: '150px'}};
const wrapperCol = {span: 14};
const resetForm = () => {
  formRef.value.resetFields();
};

//接收参数
const route = useRoute();
//生命周期
onMounted(() => {
  formState.bulletinId = route.params.bulletinId as string;
  getBulletinInfo()
})
//获取公告信息
const getBulletinInfo = async () => {
  if (formState.bulletinId) {
    const res = await getBulletinDetailAPI({
      bulletinId: formState.bulletinId
    })
    if (res.data.flag) {
      formState.bulletinStatus = res.data.data.bulletinStatus;
      formState.bulletinTitle = res.data.data.bulletinTitle;
      formState.bulletinText = res.data.data.bulletinText;
    }
  }
}
//关闭公告
const closeBulletin = async () => {
  const res = await updateBulletinAPI({
    bulletinId: formState.bulletinId,
    bulletinStatus: '已关闭',
    bulletinText: formState.bulletinText,
    bulletinTitle: formState.bulletinTitle
  });
  if (res.data.flag) {
    message.success('关闭成功');
    formState.bulletinStatus = '已关闭'
  } else {
    message.error('关闭失败');
  }
}
//开启公告
const openBulletin = async () => {
  const res = await updateBulletinAPI({
    bulletinId: formState.bulletinId,
    bulletinStatus: '已发布',
    bulletinText: formState.bulletinText,
    bulletinTitle: formState.bulletinTitle
  });
  if (res.data.flag) {
    message.success('发布成功');
    formState.bulletinStatus = '已发布'
  } else {
    message.error('发布失败');
  }
}
//删除公告
const deleteBulletin = async () => {
  const res = await deleteBulletinAPI(formState.bulletinId);
  if (res.data.flag) {
    message.success('删除成功');
    router.go(-1)
  } else {
    message.error('删除失败');
  }
}
</script>
<template>
  <div class="add_job">
    <div class="top">
      <a-page-header
          sub-title="公告详情表单"
          title="返回"
          @back="() => $router.go(-1)"
      />
      <a-divider orientation="left" style="color:#4D7181; font-size: 20px;padding: 0 50px">基本信息</a-divider>
    </div>
    <div class="bottom">
      <div>
        <a-form
            ref="formRef"
            :label-col="labelCol"
            :model="formState"
            :rules="rules"
            :wrapper-col="wrapperCol"
        >
          <a-row gutter="16"> <!-- 使用a-row作为行容器，gutter设置列间距为16px -->
            <a-col :span="12"> <!-- 第一列占12格 -->
              <a-form-item ref="bulletinTitle" label="公告标题" name="bulletinTitle">
                <a-input v-model:value="formState.bulletinTitle"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item ref="bulletinText" label="公告内容" name="bulletinText">
            <a-textarea v-model:value="formState.bulletinText"
                        :auto-size="{minRows: 6, maxRows: 10}"
                        :maxlength="500"
                        show-count
            />
          </a-form-item>


          <div class="form-button">
            <a-button ghost type="primary" @click="onSubmit">保存编辑</a-button>
            <a-button danger type="dashed" @click="resetForm">重置表单</a-button>
            <a-button v-if="formState.bulletinStatus === '已发布'" danger ghost type="primary" @click="closeBulletin">
              关闭公告
            </a-button>
            <a-button v-else style="color: white;background-color: #67C23A" @click="openBulletin">发布公告</a-button>
            <a-button danger type="primary" @click="deleteBulletin">删除公告</a-button>
          </div>

        </a-form>
      </div>
    </div>

  </div>

</template>

<style scoped>
.add_job {
  width: 100%;
  height: 100%;

  .bottom {
    padding-right: 50px;

    .form-button {
      margin-right: 100px;
      width: 400px;
      display: flex;
      float: right;
      justify-content: space-around
    }
  }

}
</style>
